<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            width: 500px;
        }

        table tr td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>购物车</h3>
        <hr />
        <table>
            <tr>
                <td>
                    <input type="checkbox" v-model="checked" @change="checkAll" />
                </td>
                <td>id</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>

            </tr>
            <tr v-for="(item,index) in cartData" :key="item.id">
                <td>
                    <input type="checkbox" name="" id="" :value="item.id" v-model="checkarr" />
                </td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button :disabled="item.num <=1" @click="item.num--">-</button>
                    {{item.num}}
                    <button @click="item.num++">+</button>
                    <button @click="delFunc(index)">×</button>

                </td>
                <td>{{item.price * item.num}}</td>
            </tr>
            <!-- 1、在dom上增加了一行，写 总数量和总价格 -->
            <tr>
                <td>
                    <button @click='aa'>反选</button>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <!-- 4.调用 总数量的计算属性 -->
                <td>总数量：{{totalNum}}</td>
                <td>总价格：{{totalPrice}}</td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                checkarr: [],//选中的input 的 value值
                checked: false,//全选按钮目前不是选中状态
                cartData: [{
                    id: 1,
                    name: '小米',
                    price: 100,
                    num: 1
                }, {
                    id: 2,
                    name: '华为',
                    price: 200,
                    num: 2
                }, {
                    id: 3,
                    name: '联想',
                    price: 300,
                    num: 1
                }]
            },
            methods: {
                aa:function(){
                   this.cartData.forEach(item=>{
                       if(this.checkarr.includes(item.id)==true){
                           this.checkarr.splice(0,1)
                       }else{
                           this.checkarr.push(item.id)
                       }
                   })
                   

                   
                   },  
                delFunc: function (index) {
                    confirm("确认要删除么？") && this.cartData.splice(index, 1);
                    //删除时重新计算全选
                    if (this.checkarr.length === this.cartData.length) {//全部选中
                        this.checked = true;
                    } else {//没有全部选中
                        this.checked = false;
                    }
                    // if(confirm("确认要删除么？") ){
                    //     this.cartData.splice(index, 1);
                    // }
                },
                //全选
                checkAll: function () {
                    if (this.checked) {
                        this.cartData.forEach(item => {
                            //将选中的input框的value值放到 数组中
                            this.checkarr.push(item.id);
                        })
                    } else {
                        this.checkarr = [];
                    }
                }
            },
            //2.定义 计算属性，计算总数量
            computed: {
                totalNum: function () {
                    var sum = 0; //存放 总数量
                    //3.判断 商品是否选中
                    console.log(this.checkarr);
                    this.cartData.forEach(item => {
                        let pos = this.checkarr.indexOf(item.id);//如果能查询到 id  就表示选中了
                        if (pos != -1) {
                            sum += item.num;
                        }
                    })
                    return sum;
                },
                //作业：总价格
                totalPrice: function () {
                    var sum = 0; //存放 总数量
                    //3.判断 商品是否选中
                    console.log(this.checkarr);
                    this.cartData.forEach(item => {
                        let pos = this.checkarr.indexOf(item.id);//如果能查询到 id  就表示选中了
                        if (pos != -1) {
                            sum += item.num * item.price;
                        }
                    })
                    return sum;
                },

            },
            //需求： 什么时候可以将 全选的对钩画上
            watch: {
                //a.新建监听函数 监听每个商品的input是否选中  ，监听 checkarr
                checkarr: function () {
                    console.log("监听了");
                    if (this.checkarr.length === this.cartData.length) {//全部选中
                        this.checked = true;
                    } else {//没有全部选中
                        this.checked = false;
                    }
                }
            }
        })
    </script>
</body>

</html>